<!--
 * @Author: 曹哈哈 2273766442@qq.com
 * @Date: 2024-11-01 16:23:56
 * @LastEditors: 曹哈哈 2273766442@qq.com
 * @LastEditTime: 2024-11-01 16:33:32
 * @FilePath: \management-mini-program\src\pages\main\parkingLot\modal\channel\ChannelForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view>
    <tn-popup
        v-model="isPopupVisible"
        width="95%"
        open-direction="bottom"
        @close="close"
        close-btn>
        <view class="tn-m-sm tn-p-sm">
            <view class="tn-mb-xl">
                <tn-title
                    size="lg"
                    :title="(formType=='create'?'新增':'修改')+'岗亭'"
                    mode="hLine"
                    sub-title="VehicleType"
                    assist-color="tn-blue" />
            </view>
			<scroll-view
			     style="height: 70vh;" scroll-y="true" class=" ">
            <!-- 车场参数的内容 -->
            <tn-switch-tab v-model="currentTabIndex" :tabs="tabs" inactive-bg-color="tn-gradient-bg__blue" inactive-text-color="tn-white">
            <view v-show="currentTabIndex === 0" >
               <ChannelInfoForm ref="channelInfoFormRef"/>
          
              </view>
            <view v-show="currentTabIndex === 1" class=" ">
              <ControlCardCameraForm  ref="controlCardCameraFormRef"/>
            </view>
            <view v-show="currentTabIndex === 2" >
          
              <ScreenCoiceFrom   ref="screenCoiceFromRef" />
          
            </view>
           
          </tn-switch-tab>
		  
		  </scroll-view>
		  
		  </view>
          
       
    </tn-popup>
	   </view>
</template>

<script setup lang="ts">
    import {  defineEmits, ref ,reactive} from "vue"; 
    import { COUPON_TYPE, COUPON_UNITS } from "@/utils/dict"; // 引入字典
	import ChannelInfoForm from '../../components/channel/ChannelInfoForm.vue'
	import ControlCardCameraForm from '../../components/channel/ControlCardCameraForm.vue'
	import ScreenCoiceFrom from '../../components/channel/ScreenCoiceFrom.vue'
    
	const pkId = ref();
    
    // 当前选中的标签索引
    const currentTabIndex = ref(0)
    
    const tabs = ['通道信息', '控制卡和相机','屏显和语音']
	
	
    const isPopupVisible = ref(false);  
    const formType = ref(""); // 表单的类型：create - 新增；update - 修改
    const formData = ref({
        id: undefined,
        channelName: undefined,
        parkingLotName: undefined,
    });
    const formRef = ref(); // 表单 Ref
    /** 打开弹窗 */
    const open = async (type: string, id?: number) => {
        isPopupVisible.value = true; 
        formType.value = type;
  
        // 修改时，设置数据
        if (id) {
			// 设置修改主键
			pkId.value = id
            try {
				// getDeatilById 获取formData 数据 
				ChannelInfoForm.value.getDetailById(id)
				
            } catch {}
        }
    };
	
	const close= () => {
		isPopupVisible.value = false;
	};
	
	 const changeTabIndex= (e:number)=>{
		 currentTabIndex.value = e
		 if(pkId.value){
			 if(currentTabIndex==0){
				 ChannelInfoForm.value.getDetailById(pkId.value);
				 
			 }else	 if(currentTabIndex==1){
				 ControlCardCameraForm.value.getDetailById(pkId.value);
			 }else	 if(currentTabIndex==2){
				 ScreenCoiceFrom.value.getDetailById(pkId.value);
			 }
		 }
		 
	 }


    
	defineExpose({ open }); // 提供 open 方法，用于打开弹窗
 
</script>

<style></style>

